<template>
<div>
    <div class="topnav">
        <svg v-if="toggleMenuButtonVisible" class="toggleAside" @click="toggleAside">
            <use xlink:href="#icon-toggle-right"></use>
        </svg>
        <div class="log">
            <router-link to="/">
                <svg class="icon">
                    <use xlink:href="#icon-qiyiguo" />
                </svg>
            </router-link>
        </div>
        <div class="meun">
            <ul>
                <li>
                    <router-link to="/doc/switch">文档</router-link>
                </li>

            </ul>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    inject,
    Ref
} from "vue";
export default {
    props: {
        toggleMenuButtonVisible: {
            type: Boolean,
            default: false,
        },
    },
    setup() {
        const asideVisible = inject < Ref < boolean >> ("asideVisible");
        const toggleAside = () => {
            asideVisible.value = !asideVisible.value;
        };
        return {
            toggleAside
        };
    },
};
</script>

<style lang="scss" scoped>
$green: #02bcb0;
$color: #34a7a1;

.topnav {
    color: $color;
    height: 3rem;
    display: flex;
    position: fixed;
    z-index:3000;
    top: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
    background: #fff;
    box-shadow: 0 3px 3px $color;

    .toggleAside {
        height: 30px;
        width: 30px;
        background: fade-out(#000000, 0.8);
        margin-left: 10px;
        display: none;
    }

    .log {
        margin-left: 2rem;
        cursor: pointer;

        a {
            color: $color;
        }

        svg {
            width: 32px;
            height: 32px;
        }
    }

    .meun {
        ul {
            display: flex;

            li {
                margin-right: 2rem;

                a {
                    color: $color;
                }
            }
        }
    }

    @media (max-width: 500px) {
        .meun {
            display: none;
        }

        .log {
            position: absolute;
            left: 50%;
            transform: translateX(-100%);
        }

        .toggleAside {
            display: block;
        }
    }
}
</style>
